<template>
  <div class="scoreStatistics">
    <el-card class="box-card">
      <div class="leftBox">
        <!-- <div class="searchBox">
          <div class="box1">
            <el-select
              v-model="value1"
              placeholder="请选择项目状态"
              @change="searchBtn"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <button @click="searchBtn">查询</button>
        </div> -->
        <div class="cansBox">
          <leftCan></leftCan>
        </div>
        <div class="nameBox">职业技能</div>
        <div class="bottomBox">
          <div class="blurBox">
            <div class="collegeBox">
              <span class="box1"></span>
              <span>班级平均</span>
            </div>
            <div class="classBox">
              <span class="box2"></span>
              <span>个人成绩</span>
            </div>
          </div>
        </div>
      </div>
      <div class="midBox">
        <!-- <div class="searchBox">
          <div class="box1 box11">
            <el-select
              v-model="value1"
              placeholder="请选择项目状态"
              @change="searchBtn"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <button @click="searchBtn">查询</button>
        </div> -->
        <div class="cansBox">
          <midCan></midCan>
        </div>
        <div class="nameBox">职业素质</div>
        <div class="bottomBox">
          <div class="blurBox">
            <div class="collegeBox">
              <span class="box1"></span>
              <span>班级平均</span>
            </div>
            <div class="classBox">
              <span class="box2"></span>
              <span>个人成绩</span>
            </div>
          </div>
        </div>
      </div>
      <div class="rightBox">
        <!-- <div class="searchBox">
          <div class="box1 box11">
            <el-select
              v-model="value1"
              placeholder="请选择项目状态"
              @change="searchBtn"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <button @click="searchBtn">查询</button>
        </div> -->
        <div class="cansBox">
          <rightCan></rightCan>
        </div>
        <div class="nameBox">专业知识</div>
        <div class="bottomBox">
          <div class="blurBox">
            <div class="collegeBox">
              <span class="box1"></span>
              <span>班级平均</span>
            </div>
            <div class="classBox">
              <span class="box2"></span>
              <span>个人成绩</span>
            </div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import leftCan from '@/components/statistics/commonMis/scoreStatisticsEarchs/leftCan.vue';
import midCan from '@/components/statistics/commonMis/scoreStatisticsEarchs/midCan.vue';
import rightCan from '@/components/statistics/commonMis/scoreStatisticsEarchs/rightCan.vue';
export default {
  name: 'ScoreStatistics',
  components: {leftCan, midCan, rightCan},
  props: {},
  data() {
    return {
      value1: null,
      options: [{
        value: null,
        label: '全部任务'
      }, {
        value: 1,
        label: '未开始'
      }, {
        value: 3,
        label: '进行中'
      }, {
        value: 4,
        label: '已结束'
      }]
    };
  },
  computed: {},
  watch: {},
  created() {},
  methods: {
    searchBtn() {}
  }
};
</script>

<style lang="less" scoped>
.scoreStatistics {
  width: calc(100% - 40px);
  padding: 0 20px;
  overflow: hidden;
  /deep/ .box-card {
    height: 778px;
    width: 100%;
    margin-bottom: 30px;
    .el-card__body {
      height: 100%;
      display: flex;
      padding: 40px;
      .leftBox {
        width: 33%;
        height: 100%;
        box-sizing: border-box;
        border-right: 1px solid #ddd;
      }
      .midBox {
        width: 34%;
        height: 100%;
        box-sizing: border-box;
        border-right: 1px solid #ddd;
      }
      .rightBox {
        width: 33%;
        height: 100%;
        box-sizing: border-box;
      }
      .searchBox {
        // width: 850px;
        height: 32px;
        margin-bottom: 20px;
        display: flex;
        // justify-content: space-between;
        .box1 {
          position: relative;
          width: 195px;
          height: 32px;
          font-size: 12px;
        }
        .box11 {
          margin-left: 40px;
        }
        // button {
        //   cursor: pointer;
        //   font-size: 16px;
        //   font-family: PingFangSC-Medium, PingFang SC;
        //   font-weight: 500;
        //   color: #ffffff;
        //   line-height: 28px;
        //   width: 85px;
        //   height: 32px;
        //   background: #2fc0e0;
        //   border-radius: 4px;
        //   box-shadow: 0 0 5px #2fc0e0;
        //   margin-top: 5px;
        //   margin-left: 40px;
        // }
      }
      .cansBox {
        width: 100%;
        height: 500px;
        box-sizing: border-box;
        padding-right: 20px;
      }
      .nameBox {
        width: 100%;
        height: 30px;
        text-align: center;
        font-size: 22px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
        line-height: 30px;
        margin-top: 10px;
      }
      .bottomBox {
        width: 230px;
        margin: 0 auto;
        margin-top: 60px;
        .blurBox {
          display: flex;
          .collegeBox {
            font-size: 18px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #666666;
            .box1 {
              display: inline-block;
              width: 15px;
              height: 15px;
              border-radius: 50%;
              background: #8c5fdd;
            }
          }
          .classBox {
            font-size: 18px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #666666;
            margin-left: 35px;
            .box2 {
              display: inline-block;
              width: 15px;
              height: 15px;
              border-radius: 50%;
              background: #2fc0e0;
            }
          }
        }
      }
    }
  }
}
</style>
